<template>
  <div id="credits">
    <div class="credits-bg">
      <div class="quan">
        <div>
          <p class="creditsZhi">
            <countup :end-val="credits" :duration="1" :decimals="0" class="countupd"></countup>
          </p>
          <p>{{des}}</p>
          <p>{{date}}更新</p>
        </div>
      </div>
      <p>高分信用意味着您具有良好的口碑,请珍惜信用!满分100分</p>
      <div @click="showXy = true" class="read">查看详细规则 ></div>
    </div>

    <div class="credits-item">
      <ul>
        <li>
          <div>
            <p>一般投诉</p>
            <p class="text-gray"><small>无故取消订单等</small></p>
          </div>
          <div>{{frequency1}}次</div>
        </li>
        <li>
          <div>
            <p>较重投诉</p>
            <p class="text-gray"><small>态度问题等</small></p>
          </div>
          <div>{{frequency2}}次</div>
        </li>
        <li>
          <div>
            <p>严重投诉</p>
            <p class="text-gray"><small>恶意加价、车型不符等</small></p>
          </div>
          <div>{{frequency3}}次</div>
        </li>
      </ul>
    </div>
    <div class="credits-title" v-if="!$route.query.id">
      <router-link to="creditsList" style="color: #f3532c; display: block; line-height: 0.8rem;">扣分记录 ></router-link>
    </div>
    <div v-transfer-dom>
      <popup v-model="showXy" position="bottom" style="height: 100%;background: #fff;">
        <div style="height: 1.2rem;line-height: 1.2rem; padding: 0rem 0.35rem; text-align: right">
          <i class="icon icon-close" style="font-size: 0.6rem;" @click="showXy = false"></i>
        </div>
        <credits-doc></credits-doc>
      </popup>
    </div>
  </div>
</template>
<script>

  import CreditsDoc from '../../components/CreditsDoc.vue'
  import PubHeader from '../../components/PubHeader.vue'
  import { Countup, TransferDom } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    name: 'credits',
    components: {
      PubHeader,
      Countup,
      CreditsDoc
    },
    created(){
      const sid = this.$route.query.id || ''
      this.$http.post($config.host + '/api/Credit/getMyCredits', qs.stringify({
        sid,
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const { code, msg, data } = res.data
        if(code == '1' && data) {
          this.credits = parseInt(data.credit)
          this.frequency1 = data.s_times
          this.frequency2 = data.ss_times
          this.frequency3 = data.sss_times
          this.date = data.date
          this.des = data.des || '继续保持'
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    data() {
      return {
        showXy: false,
        credits: 0,
        frequency1: 0,
        frequency2: 0,
        frequency3: 0,
        date: '',
        des: ''
      }
    }
  }
</script>
<style scoped>
  .credits-bg{
    height: 5.3rem;
    background: #ff5722;
    padding-top: .55rem;
    font-size: 0.26rem;
    color: #fff;
    text-align: center;
  }
  .quan{
    height:2.8rem;
    width: 2.8rem;
    border-radius: 50%;
    border: 5px solid #fff;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
  }
  .quan p{
    text-align: center;
    font-size: 0.26rem;
    line-height: 0.32rem;
  }
  .quan p.creditsZhi{
    font-size: 0.6rem;
    line-height: 0.7rem;
    margin-bottom: 0.1rem;
    font-weight: 500;
    width: 2rem;
  }
  .read{
    color: #fff;
    display: inline-block;
    padding: 0.12rem 0.3rem;
    border-radius: 0.1rem;
    border: 1px solid #fff;
    margin-top: 0.35rem;
  }
  .credits-title{
    margin-top: 0.4rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.3rem;
  }
  .credits-item{
    margin-top: 0.75rem;
    padding: 0rem 0.45rem;
  }
  .credits-item li{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
  }
  .credits-item li div:first-of-type{
    padding-left: 0.35rem;
    position: relative;
  }
  .credits-item li div:first-of-type:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0.14rem;
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 50%;
    background: #999;
    z-index:1;
  }
</style>
